<template>
	<div>
		<div class="header">
			<div class="header-center">赛事筛选</div>
			<div class="header-right" @click='checkeds'>确定</div>
		</div>
		<div class="main">
			<ul>
				<li 
					v-for="(item,index) of list"
					:key="index"
					:dataId = 'item.tournament_stage_id'
					@click='toggleItem(item.tournament_stage_id)'
					:class='checkedListId.indexOf(item.tournament_stage_id)>-1?"hover":""'
				>	
					<span>{{item.name }}</span>
					<span>({{ item.num }}场)</span>
					<span class="iconfont">{{ checkedListId.indexOf(item.tournament_stage_id) > -1?'&#xe625;':'' }}</span>
				</li>
			</ul>
			<div class="checkbox">
				<p @click='checkAll'><span class="iconfont">{{checkAllState?'&#xe746;':'&#xe697;'}}</span>全选</p>
				<p @click='noCheckAll'><span class="iconfont">{{noCheckState?'&#xe746;':'&#xe697;'}}</span>全不选</p>
				<p @click='fiveCheck'><span class="iconfont">{{fivecheckState?'&#xe746;':'&#xe697;'}}</span>只看五大联赛</p>
			</div>
		</div>
	</div>	
</template>
<script>
export default {
	name: 'Filtrate',
	props:{
      list:Array,
    },
	data:function(){
		return {
			checkedListId:'',
			checkAllState:true,
			fivecheckState:false,
			noCheckState:false
		}
	},
	methods:{
		toggleItem(id){
			let checkedLists = this.checkedListId;
			if (checkedLists.indexOf(id) > -1) {
				checkedLists = checkedLists.replace(id+';','');
			}else{
				checkedLists = checkedLists +id+';'
			}
			this.checkedListId = checkedLists
		},
		checkAll(){
			var ids = '',lists = this.list;
			lists.forEach(function(item,index){
				ids = ids + item.tournament_stage_id+';';
			})
			this.checkedListId = ids;
			this.checkAllState = true;
			this.fivecheckState = false;
			this.noCheckState = false;
		},
		noCheckAll(){
			this.checkedListId = '';
			this.noCheckState = true;
			this.checkAllState = false;
			this.fivecheckState = false;

		},
		fiveCheck(){
			var ids = '',lists = this.list;
			lists.forEach(function(item,index){
				if (item.is_league == "1") {
					ids = ids + item.tournament_stage_id+';';
				}
			})
			this.checkedListId = ids;
			this.checkAllState = false;
			this.fivecheckState = true;
			this.noCheckState = false;
		},
		checkeds(){
			let checkedList = this.checkedListId;
			this.$emit('handcheckList',checkedList)
		},
	},
	created:function(){
		this.checkAll();
	},
	mounted:function(){
		
	},
	activated () {
		// var fromName = this.$route.query.from;
		// var checkedList = sessionStorage.getItem(fromName+'checkedList')
		// // debugger
		// if (checkedList) {
		// 	this.checkedListId = checkedList;
		// }else{
		// 	this.checkAll();
		// }
		
	}
};
</script>
<style lang="less" scoped>
	@import '~styles/varibles.less';
	@import '~styles/header.less';
	.header .header-left{
		font-size: .5rem;
		line-height: 1rem;
	}
	.main{
		padding-top: @hearderHig;
		ul{
			width: 100%;
			box-sizing: border-box;
			padding:.3rem .1rem 0.8rem;
			overflow: hidden;
			li{
				float: left;
				display: flex;
				justify-content: space-around;
				width: 46%;
				height: .65rem;
				line-height: .65rem;
				border-radius: .04rem;
				margin:0 2% .2rem 2%;
				background:#D3F0C3;
				color: #2F2F2F;
				span{
					flex: 4;
					padding:0 .1rem;
					&.iconfont{
						flex: 2;
						text-align: center;
					}
					&:first-child{
						flex: 6;
					}
				}
				&.hover{
					background: @greenColor;
					color: #fff;
				}
			}
		}
		.checkbox{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background:#fff;
			padding:.3rem;
			display: flex;
			p:nth-child(1){
				flex: 2;
			}
			p:nth-child(2){
				flex: 2;
			}
			p:nth-child(3){
				flex: 5;
			}
			span{
				color: @greenColor;
				margin-right: .2rem;
			}

		}
	}
</style>
